<template>
    <div>
        <page-main title-icon="dashboard" :title="`${titleData.name}-${titleData.class}-${titleData.groupName}`">
            <template slot="title-left">
                <el-button type="primary" icon="el-icon-back" size="mini" @click="$router.back()">返回上一页</el-button>
            </template>
            <el-table :data="tableData" :default-expand-all="isExpand" :border="false">
                <el-table-column type="expand" width="30">
                    <div slot-scope="props" style="margin: 15px 0;">
                        <el-row>
                            <el-col :md="6" style="text-align: center;">
                                日常汇报:
                            </el-col>
                            <el-col :md="6">
                                日报：应完成：<span class="input-num">12</span> 已完成：<span class="input-num">1231</span>
                            </el-col>
                            <el-col :md="6">
                                周报：应完成：<span class="input-num">12</span> 已完成：<span class="input-num">1231</span>
                            </el-col>
                            <el-col :md="6">
                                月报：应完成：<span class="input-num">12</span> 已完成：<span class="input-num">1231</span>
                            </el-col>
                        </el-row>
                    </div>
                </el-table-column>
                <el-table-column v-for="item in tableTitleData" :key="item.value" :prop="item.value" :label="item.label"
                                 :align="'center'"
                />
                <el-table-column
                    label=""
                    width="100"
                >
                    <template slot-scope="scope">
                        <el-button type="primary" size="small" @click="handleClick(scope.row)">详情</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </page-main>
    </div>
</template>

<script>
import PageMain from '@/components/PageMain'
import {mapState} from 'vuex'

export default {
    components: {PageMain},
    data() {
        return {
            isExpand: true,
            tableData: [
                {
                    job: '组长',
                    name: '刘虎'
                },
                {
                    job: '组员',
                    name: '伍德'
                }
            ],
            tableTitleData: [
                {
                    label: '职务',
                    value: 'job'
                },
                {
                    label: '姓名',
                    value: 'name'
                },
                {
                    label: '周期进度',
                    value: 'cycle'
                },
                {
                    label: '考核进度',
                    value: 'assess'
                }
            ]
        }
    },
    computed: {
        ...mapState({
            titleData: state => state.teachingTrack.tableData
        })
    },
    methods: {
        handleClick(val) {
            const {name} = val
            this.$router.push('/teachingTrack/staff/detail?name=' + name)
        }
    }
}
</script>

<style scoped>
.input-num {
    border: 1px solid #dedede;
    padding: 5px 8px;
    border-radius: 6px;
}
</style>
